<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="../../layui/css/layui.css" rel="stylesheet" type="text/css">
    <!-- <link href="../../xznstatic/css/public.css" rel="stylesheet" type="text/css" />
    <link href="../../xznstatic/css/login.css" rel="stylesheet" type="text/css" /> -->
    <style>
        body,
        html {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body class="min-h-screen bg-cover bg-center flex items-center justify-center"
    style="background-image: url('http://codegen.caihongy.cn/20201218/7886ddf02de9474a8045fdf7341479dc.jpg');">
    <div id="app" class="w-full flex justify-center items-center min-h-screen">
        <form
            class="layui-form bg-white bg-opacity-90 rounded-2xl shadow-2xl p-8 w-full max-w-md flex flex-col space-y-6"
            id="loginForm">
            <div class="text-3xl font-bold text-blue-600 text-center mb-2">登录</div>
            <div class="text-xs text-red-500 text-center mb-2">公共场所不建议自动登录，以防账号丢失</div>
            <div class="flex flex-col space-y-2">
                <input autocomplete="off"
                    class="border border-blue-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                    lay-verify="required" name="username" placeholder="请输入账号" required type="text">
            </div>
            <div class="flex flex-col space-y-2">
                <input autocomplete="off"
                    class="border border-blue-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                    lay-verify="required" name="password" placeholder="请输入密码" required type="password">
            </div>
            <button
                class="w-full py-2 bg-gradient-to-r from-blue-500 to-green-400 text-white font-semibold rounded shadow hover:from-green-400 hover:to-blue-500 transition-all"
                lay-filter="login" lay-submit>登录</button>
            <div class="flex flex-col items-center mt-2">
                <template v-for="(item,index) in menu">
                    <a v-if="item.hasFrontRegister=='是' && item.tableName==='yonghu'"
                        :href="'javascript:registerClick(\''+item.tableName+'\')'"
                        class="text-blue-600 hover:underline text-sm py-1">注册{{item.roleName.replace('注册', '')}}</a>
                </template>
            </div>
        </form>
    </div>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/config.js"></script>
    <script src="../../modules/config.js"></script>
    <script src="../../js/utils.js"></script>
    <script type="text/javascript">
        var vue = new Vue({
            el: '#app',
            data: {
                menu: menu,
                selectedRole: 'yonghu'
            },
            mounted() {
                // 默认选中“用户”
                if (this.menu && this.menu.length) {
                    let user = this.menu.find(i => i.tableName === 'yonghu' && i.hasFrontLogin === '是');
                    if (user) this.selectedRole = 'yonghu';
                    else this.selectedRole = this.menu[0].tableName;
                }
            },
            methods: {
                jump(url) { jump(url) }
            }
        })
        var codes = [{
            num: 1,
            color: '#000',
            rotate: '10deg',
            size: '16px'
        }, {
            num: 2,
            color: '#000',
            rotate: '10deg',
            size: '16px'
        }, {
            num: 3,
            color: '#000',
            rotate: '10deg',
            size: '16px'
        }, {
            num: 4,
            color: '#000',
            rotate: '10deg',
            size: '16px'
        }]


        layui.use(['layer', 'element', 'carousel', 'form', 'http', 'jquery'], function () {
            var layer = layui.layer;
            var element = layui.element;
            var carousel = layui.carousel;
            var form = layui.form;
            var http = layui.http;
            var jquery = layui.jquery;

            function randomString() {
                var len = 4;
                var chars = [
                    'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
                    'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
                    'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
                    'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
                    'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2',
                    '3', '4', '5', '6', '7', '8', '9'
                ]
                var colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
                var sizes = ['14', '15', '16', '17', '18']

                var output = []
                for (var i = 0; i < len; i++) {
                    // 随机验证码
                    var key = Math.floor(Math.random() * chars.length)
                    codes[i].num = chars[key]
                    // 随机验证码颜色
                    var code = '#'
                    for (var j = 0; j < 6; j++) {
                        var key = Math.floor(Math.random() * colors.length)
                        code += colors[key]
                    }
                    codes[i].color = code
                    // 随机验证码方向
                    var rotate = Math.floor(Math.random() * 45)
                    var plus = Math.floor(Math.random() * 2)
                    if (plus == 1) rotate = '-' + rotate
                    codes[i].rotate = 'rotate(' + rotate + 'deg)'
                    // 随机验证码字体大小
                    var size = Math.floor(Math.random() * sizes.length)
                    codes[i].size = sizes[size] + 'px'
                }

                var str = ''
                for (var i = 0; i < codes.length; i++) {
                    str += '<span style="color:' + codes[i].color + ';transform:' + codes[i].rotate + ';fontSize:' + codes[i].size + ';padding: 0 3px;display:inline-block">' + codes[i].num + '</span>'
                }
                jquery('#nums').html('').append(str);
            }

            jquery('#nums').click(function () {
                randomString();
            })

            randomString();

            // 登录
            form.on('submit(login)', function (data) {
                data = data.field;
                data.role = 'yonghu'; // 强制加上，保证后续逻辑正常
                http.request('yonghu/login', 'get', data, function (res) {
                    layer.msg('登录成功', {
                        time: 2000,
                        icon: 6
                    });
                    // 登录凭证
                    localStorage.setItem('Token', res.token);
                    localStorage.setItem('role', '用户');
                    // 当前登录用户角色
                    localStorage.setItem('userTable', data.role);
                    localStorage.setItem('sessionTable', data.role);
                    // 用户名称
                    localStorage.setItem('adminName', data.username);
                    http.request(data.role + '/session', 'get', {}, function (res) {
                        // 用户id
                        localStorage.setItem('userid', res.data.id);
                        // 路径访问设置
                        window.location.href = '../../index.html';
                    })
                });
                return false
            });

        });

        /**
         * 跳转登录
         * @param {Object} tablename
         */
        function registerClick(tablename) {
            window.location.href = '../' + tablename + '/register.html?tablename=' + tablename;
        }
    </script>
</body>

</html>